<script setup lang="ts">
</script>

<template>
  <div class="app">
    <RouterView />
  </div>
</template>

<style scoped>
.app {
  min-height: 100vh;
  width: 100%;
}

.main-nav {
  width: 100%;
  text-align: center;
  padding: 1rem 0;
  background-color: var(--color-background-soft, #f8f9fa);
  border-bottom: 1px solid var(--color-border, #e9ecef);
}

.main-nav a {
  display: inline-block;
  padding: 0.5rem 2rem;
  margin: 0 0.5rem;
  text-decoration: none;
  color: var(--color-text, #2c3e50);
  border-radius: 4px;
  transition: all 0.3s ease;
}

.main-nav a:hover {
  background-color: var(--color-background-mute, #e9ecef);
}

.main-nav a.router-link-exact-active {
  background-color: var(--color-brand, #42b883);
  color: white;
}
</style>